<script setup>
import FollowButton from '@/components/FollowButton.vue'
import { useHeaderStore } from '@/views/Layout/Header/stores/headerStore'
import { useMyInfoQuery } from '@/composables/useUserInfoQuery'
import AddFriendDialog from './AddFriendDialog.vue'
import { ref, computed } from 'vue'

const { userInfo } = defineProps({
  userInfo: {
    type: Object,
  },
})

const headerStore = useHeaderStore()
const handleEdit = () => {
  headerStore.showUserInfoEdit()
}
const { userInfo: myInfo } = useMyInfoQuery()

const showAddFriendDialog = ref(false)
const isSelf = computed(() => userInfo && myInfo?.result?.uid && userInfo.uid === myInfo.result.uid)
const isFriend = computed(() => userInfo?.isFriend ?? false)
const canAddFriend = computed(() => !!userInfo && !isSelf.value && !isFriend.value && userInfo?.socialOpen)
</script>

<template>
  <div v-if="userInfo" class="flex flex-col items-center">
    <header class="flex items-start w-[100%] py-[50px] justify-between max-w-[800px]">
      <div class="flex items-center gap-[50px]">
        <el-image
          style="width: 150px; height: 150px; border-radius: 50%"
          :src="userInfo?.avatar"
          :preview-src-list="[userInfo?.avatar]"
          show-progress
          close-on-press-escape
          :hide-on-click-modal="true"
          fit="cover" />

        <div class="flex flex-col gap-3 w-[430px]">
          <div class="">
            <div class="text-[28px] font-medium">{{ userInfo?.username }}</div>
            <div class="flex gap-2 text-sm text-[--text-3]">
              <div>{{ userInfo?.gender === 0 ? '男' : userInfo?.gender === 1 ? '女' : '保密' }}</div>
              <!-- <div>IP属地：{{ userInfo?.city }}</div> -->
            </div>
          </div>
          <div>{{ userInfo?.intro }}</div>

          <div class="flex items-center gap-2 flex-wrap">
            <div
              v-for="item in userInfo?.tagStr"
              :key="item"
              class="text-xs text-[--text-3] rounded-full bg-[--fill-1] w-fit p-3 py-1">
              {{ item }}
            </div>
          </div>

          <div class="flex items-center gap-8">
            <div class="text-sm text-[--text-3] whitespace-nowrap">
              <span class="text-[--text-1] font-medium">{{ userInfo?.follow }}</span> 关注
            </div>
            <div class="text-sm text-[--text-3] whitespace-nowrap">
              <span class="text-[--text-1] font-medium">{{ userInfo?.fans }}</span> 粉丝
            </div>
            <div class="text-sm text-[--text-3] whitespace-nowrap">
              <span class="text-[--text-1] font-medium">{{ userInfo?.postNum }}</span> 帖子
            </div>
          </div>
        </div>
      </div>

      <div class="flex items-center gap-2 flex-shrink-0">
        <div
          v-if="userInfo?.uid === myInfo?.result?.uid"
          @click="handleEdit"
          class="text-sm border border-[--line-2] hover:bg-[--fill-3] rounded-md cursor-pointer p-1 px-2">
          编辑资料
        </div>
        <FollowButton :isFollow="userInfo?.isFollow" :id="userInfo?.uid" />
        <div v-if="canAddFriend" class="add-friend-btn">
          <el-button size="small" type="primary" @click="showAddFriendDialog = true">加好友</el-button>
        </div>
      </div>
    </header>
    <AddFriendDialog :visible="showAddFriendDialog" :userInfo="userInfo" @update:visible="showAddFriendDialog = $event" />
  </div>
</template>
